<script setup lang="ts">
import { ref } from 'vue'
import {useRoute} from "vue-router";
import {getSimInfoApi} from "@/api/gps/recharge/recharge";

const visible = ref(false)
const data = ref({
  msisdn:'',
  carrier:'',
  iccid:'',
  imsi:'',
  dataUsage:'',
  smsUsed:'',
  status:'',
  cateName:'',
  activeDate:'',
  dataPlan:'',
  expiryDate:'',
  dataBalance:'',
  smsTotal:'',
})
const props = defineProps({
  iccid: {
    type: String,
    required: true
  }
})
const init = () => {
  visible.value = true
  getSimInfo()
}
init()
function getSimInfo(){
  let iccid = props.iccid
  getSimInfoApi(iccid).then((res)=>{
    data.value = res.data
  })
}
defineExpose({
  init
})
</script>

<template>
  <div class="container">
    <div class="top">
      <div>
        <img class="logo" src="/src/assets/card_merchants.png" />
        <div style="text-align: center; margin-bottom: 10px; color: #ffffff">
          {{data.carrier}}
        </div>
      </div>
      <div class="right">
        <div>
          <p>
            SIM卡号：<span>{{ data.msisdn }}</span>
          </p>
        </div>
        <div>
          <p>ICCID:：<span>{{data.iccid}}</span></p>
        </div>
        <div>
          <p>IMSI：<span>{{data.imsi}}</span></p>
        </div>
        <div>
          <p>卡状态：<span>{{data.status}}</span></p>
        </div>
<!--        <div>-->
<!--          <p>实名认证：<span>无</span><span class="button">刷新</span></p>-->
<!--        </div>-->
      </div>
    </div>
    <div>
     <div class="content">
       <div style="width: 50%;text-align: center">
<!--         <div style="">6.89%</div>-->
         <div>已用流量<span>{{data.dataUsage}}</span></div>
       </div>
       <div style="width: 50%; text-align: center">
<!--         <div>{{}}</div>-->
         <div>已用短信<span>{{data.smsUsed}}</span>条</div>
       </div>
     </div>
      <div class="display">
        <div>
          <div>总流量</div>
          <div>{{data.dataPlan}}</div>
        </div>
        <div>
          <div>剩余流量</div>
          <div>{{data.dataBalance}}</div>
        </div>
        <div>
          <div>总短信</div>
          <div>{{data.smsTotal}}</div>
        </div>
        <div>
          <div>剩余短信</div>
          <div>{{(data.smsTotal-data.smsUsed)>0? data.smsTotal-data.smsUsed : 0 }}</div>
        </div>
      </div>

    </div>
    <div style="margin: 10px">
      <div>
        <p>套餐名称：<span>{{data.cateName}}</span></p>
      </div>
      <div>
        <p>套餐大小：<span>{{data.dataPlan}}</span></p>
      </div>
      <div>
        <p>激活日期：<span>{{data.activeDate}}</span></p>
      </div>
      <div>
        <p>计费日期：<span>{{data.expiryDate}}</span></p>
      </div>
  </div>
  </div>
</template>

<style scoped lang="scss">
.container{
  padding-top: 10px;
  width: 100%;
  background-color: rgb(255,255,255);
}
.top{
  display: flex;
  //height: 400px;
  background-color: rgb(0, 149, 255);
  //align-items: center;
}
.top>div:first-child{
  flex: 1;
}
.top>div:last-child{
  flex: 3;
}
.logo{
  margin: 10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  //position: relative;
  //left: 50%;
  //transform: translateY(10%);
}
.right{
  color: #ffffff;
}
.right>div{
  margin: 10px;
}
.button{
  width: 50px;
  background-color:#ffffff ;
  color: rgb(0, 149, 255);
  margin-left: 10px;
}
.content{
  margin: 20px 0;
  display: flex;
}
.display{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
